<template>
	<view class="page">
		<view class="header">
			<uni-nav-bar @clickLeft="goBack"  title="我的积分" background-color="transparent" color="#fff"  :border="false" :statusBar="true" left-icon="left" style="font-family: PingFang SC;font-weight: 600;font-size: 36rpx;"></uni-nav-bar>
	        <view class="jf">258</view>
			<view class="jf-btn">当前积分</view>
			<view class="jfmx-btn" @click="golpointsDetails">积分明细</view>
			<view class="qd-btn" @click="sign_in" v-if="type == 0">签到</view>
			<view class="qd-btn1" @click="sign_in" v-else>已签到</view>
		</view>
		<view class="content">
			<view class="content-top">
				<view class="shu"></view>
				<view class="content-title">积分任务</view>
			</view>
			<view class="item">
				<view class="item-img"> <image src="../../static/img/z-5278.png" mode=""></image> </view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">邀请好友注册</view>
						<view class="item-jf">+200积分</view>
					</view>
					
					<view class="item-text">发送邀请给好友完成注册各得200积分</view>
				</view>
				<view class="item-btn">去邀请</view>
			</view>
			<view class="heng"></view>
			
			<view class="item">
				<view class="item-img"> <image src="../../static/img/z-5278.png" mode=""></image> </view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">首次绑定邮箱</view>
						<view class="item-jf">+50积分</view>
					</view>
					
					<view class="item-text">填写正确的邮箱地址并完成邮箱验证</view>
				</view>
				<view class="item-btn-1">去绑定</view>
			</view>
			<view class="heng"></view>
			<view class="item">
				<view class="item-img"> <image src="../../static/img/z-5278.png" mode=""></image> </view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">填写公司信息</view>
						<view class="item-jf">+50积分</view>
					</view>
					
					<view class="item-text">首次完成公司信息填写可获得</view>
				</view>
				<view class="item-btn-1">去填写</view>
			</view>
			<view class="heng"></view>
			<view class="item">
				<view class="item-img"> <image src="../../static/img/z-5278.png" mode=""></image> </view>
				<view class="item-content">
					<view class="item-top">
						<view class="item-title">新用户注册</view>
						<view class="item-jf">+50积分</view>
					</view>
					
					<view class="item-text">手机号快速完成注册</view>
				</view>
				<view class="item-btn-2">已完成</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" :content='content'></u-modal>
	</view>
</template>

<script>
	import {
		getcheckin,
	} from '@/api/other.js'
	export default {
		data() {
			return {
				userInfo:{},
				show:false,
				title:'标题',
				content:'uView的目标是成为uni-app生态最优秀的UI框架',
				type: 0
			}
		},
		methods: {
			goBack(){
				uni.navigateBack()
			},
			golpointsDetails(){
				uni.navigateTo({
					url:'/pages/pointsDetails/pointsDetails'
				})
			},
			async sign_in(){
				if( this.type == 0){
					const res = await getcheckin({
						uid: this.userInfo.uid,
						ucode: this.userInfo.code
					})
					if(res.data.code == 1){
						this.show = true
					}else{
						this.show = false
						this.type = 1
					}
				}
				
			}
			
		},
		onLoad() {
			this.userInfo = uni.getStorageSync('userInfo')
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		min-height: 100vh;
		background-color: #F0F2F5 ;
		.header{
			width: 750rpx;
			height: 440rpx;
			position: relative;
			// padding-top: 108rpx;
			background-image: url(https://www.6dbx.com/static/ydImg/cycy123.png);
			background-repeat:no-repeat;
			 background-size:100% 100%;
			 -moz-background-size:100% 100%;
			.jf{
				height: 90rpx;
				font-family: DIN Alternate;
				font-weight: bold;
				font-size: 76rpx;
				color: #FFFFFF;
				line-height: 90rpx;
				text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
				text-align: center;
				margin-top: 48rpx;
			}
			.jf-btn{
				height: 44rpx;
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
				text-shadow: 0px 3px 6px rgba(0,0,0,0.16);
				text-align: center;
				margin-top: 12rpx;
			}
			.jfmx-btn{
				width: 116rpx;
				height: 40rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				font-size: 24rpx;
				color: #F88214;
				line-height: 40rpx;
				text-align: center;
				position: absolute;
				top: 206rpx;
				right: 30rpx;
			}
			.qd-btn{
				width: 160rpx;
				height: 72rpx;
				background: linear-gradient(90deg, #F8D39D 0%, #FFE5C4 51%, #F6C283 100%);
				border-radius: 8rpx;
				font-family: PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #9A5D34;
				line-height: 72rpx;
			    text-align: center;
				margin: 38rpx  auto;
			}
			.qd-btn1{
				width: 160rpx;
				height: 72rpx;
				background: #EEEEEE;
				border-radius: 8rpx;
			    font-family: PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #A9B1BE;
				line-height: 72rpx;
				text-align: center;
				margin: 38rpx  auto;
			}
		}// https://www.6dbx.com/static/ydImg/cycy123.png
		.content{
			width: 100%;
			background-color: #FFFFFF;
			.content-top{
				width: 750rpx;
				height: 88rpx;
				background: #FFFFFF;
				border-radius: 0rpx;
				padding: 78rpx 30rpx 22rpx 30rpx;
				display: flex;
				.shu{
					width: 6rpx;
					height: 24rpx;
					background: #F43107;
					margin-right: 10rpx;
					margin-top: 10rpx;
				}
				.content-title{
					height: 44rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
					line-height: 44rpx;
				}
			}
			.item{
				width: 750rpx;
				height: 160rpx;
				border-radius: 0rpx;
				padding: 30rpx;
				display: flex;
				.item-img{
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					image{
						width: 100%;
						height: 100rpx;
					}
				}
				.item-content{
					margin-top: 10rpx;
					margin-right: 46rpx;
					.item-top{
						display: flex;
						.item-title{
							width: 192rpx;
							height: 44rpx;
							font-family: PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #333333;
							line-height: 44rpx;
							margin-right: 40rpx;
						}
						.item-jf{
							height: 44rpx;
							font-family: PingFang SC;
							font-weight: 600;
							font-size: 32rpx;
							color: #FF4848;
							line-height: 44rpx;
						}
					}
					.item-text{
						width: 404rpx;
						height: 34rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #A9B1BE;
						line-height: 34rpx;
						margin-top: 10rpx;
					}
				}
				.item-btn{
					width: 120rpx;
					height: 52rpx;
					background: #F5DCB2;
					border-radius: 8rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #9A5D34;
					line-height: 52rpx;
					text-align: center;
					margin-top: 26rpx;
				}
				.item-btn-1{
					width: 120rpx;
					height: 52rpx;
					background: #FFFFFF;
					border-radius: 8rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #6675FF;
					line-height: 46rpx;
					text-align: center;
					margin-top: 24rpx;
					border: 2rpx solid #6675FF;
				}
				.item-btn-2{
					width: 120rpx;
					height: 52rpx;
					background: #EEEEEE;
					border-radius: 8rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
				    color: #A9B1BE;
					line-height: 52rpx;
					text-align: center;
					margin-top: 26rpx;
				}
			}
			.heng{
				width: 690rpx;
				height: 1rpx !important;
				background: #DDDDDD;
				border-radius: 0rpx;
				margin: 0 auto;
			}
		}
	}

</style>
